<template>
  <treeselect
    v-model="node"
    :options="treeNodes"
    :normalizer="treeNormalizer"
    :disable-branch-nodes="disableBranchNodes"
    :placeholder="placeholder"
    @select="treeNodeSelect"
  />

</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getTree } from '@/api/business/common/org/region'

export default {
  name: 'RegionTree',
  components: { Treeselect },
  props: {
    placeholder: {
      type: String,
      required: false,
      default: '请选择'
    },
    nodeKey: {
      type: Number,
      required: false,
      default: undefined
    },
    parentId: {
      type: Number,
      required: false,
      default: 0
    },
    disableBranchNodes: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      node: null,
      treeNodes: []
    }
  },
  mounted() {
    this.node = this.nodeKey ? this.nodeKey : this.parentId
  },
  created() {
    this.getTreeInfo()
  },
  methods: {
    refresh() {
      this.getTreeInfo()
    },
    getTreeInfo() {
      getTree(this.parentId).then(res => {
        this.treeNodes = [{ regionId: this.parentId, regionName: '根节点', children: res }]
      })
    },
    treeNodeSelect(node, instanceId) {
      this.$emit('input', node.regionId)
    },
    treeNormalizer(node) {
      return {
        id: node.regionId,
        label: node.regionName,
        children: node.children
      }
    }
  }
}
</script>

<style scoped>

</style>
